<template>
  <div class="panel-zone-bg ">
    <!-- no-padding p-b-6 -->
    <div class="little-title">
      河道变幅
    </div>
    <div class="flex-1 overflow-hidden">
      <ScrollTable
        ref="grid"
        :columns="riverwayColumns"
        :data="riverwayTableData"
        :loading="loading"
        :has-pager="false"
        border="none"
        :highlight-current-row="true"
        :stripe="false"
        :has-seq="false"
        header-cell-class-name="wrap-header-cell"
      />
      <!-- <BKTable
        ref="grid"
        :columns="riverwayColumns"
        :data="riverwayTableData"
        :loading="loading"
        :has-pager="false"
        border="none"
        :highlight-current-row="true"
        :stripe="false"
        :has-seq="false"
        :pager-config="{
          layouts:['PrevPage','Number','PageCount','NextPage','Total'],
          pagerCount:4
        }"
        :scroll-y="{enabled: true}"
        class="ysqjcdp-table"
        header-cell-class-name="wrap-header-cell"
      /> -->
    </div>
  </div>
</template>

<script>
import ScrollTable from '@/views/business/ysqjcdp/components/scroll-table'
export default {
  name: 'ChannelVariation',
  components: { ScrollTable },
  data () {
    return {
      riverwayColumns: [
        {
          title: '行政区划',
          field: 'city',
          width: 80
        },
        {
          title: '站名',
          field: 'stnm',
          minWidth: 40
        },
        {
          title: '水位变幅',
          field: 'amplitude',
          width: 80,
          slots: {
            default: ({ row }) => {
              return [
                <div class="flex-ai-c jc-c">
                  {row.amplitude }
                  {
                    (!row.amplitude || row.amplitude === 0) ? '' : ((row.amplitude > 0 ? (<BKSvgIcon
                      icon-class='svg-ysqxx-arrow-up'
                      class='f-12 m-l-tiny'/>) : (<BKSvgIcon
                      icon-class='svg-ysqxx-arrow-down'
                      class='f-12 m-l-tiny'/>)))
                  }
                </div>
              ]
            }
          }
        },
        {
          label: '变幅占比',
          field: 'amplitudeRatio',
          width: 80,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>变幅占比</span>
                  <span>（%）</span>
                </div>
              ]
            }
          }
        }

      ],
      riverwayTableData: [],
      loading: false
    }
  },
  mounted () {
    this.fetchTableData()
  },
  methods: {
    async fetchTableData () {
      this.loading = true
      const btime = this.$utils.createDate().format('YYYY-MM-DD')
      const etime = this.$utils.createDate().format('YYYY-MM-DD HH:mm:ss')
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectChannelVariation', {
        btime: btime + ' 08:00:00',
        etime: etime
      })
      // 虚拟滚动
      this.riverwayTableData = data ?? []
      this.loading = false
    }
  }
}
</script>
